<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <!-- import CSS -->
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>

<style>
  body {
    margin: 0px;
  }

  .header {
    margin: 0 auto;
    width: 500px;
  }

  .main {
    margin: 0 auto;
    width: 900px;
  }
</style>

<body>
  <div id="app">

    <div class="header">
      <i style="font-size: 100px;" class="el-icon-user" @click="gocenter"></i>
      <div style="font-size: 40px;  ">
        昵称： {{userbase.name}}
      </div>
      <div style="font-size: 40px;  ">
        真实姓名： {{userbase.realname}}
      </div>
      <div style="font-size: 40px;  ">
        手机号： {{phone}}
      </div>
      <div style="font-size: 40px;  ">
        票数： {{count}}
      </div>
      <div style="font-size: 40px;  ">
        地址： {{address}}
      </div>
    </div>
    <div style="margin: 0 auto; width: 500px; border: 2px solid gray;" @click="showwarm">
      <iframe  @click="showwarm" style=" width: 300px; height: 300px;" :src="qrcodeurl" frameborder="0"></iframe>
    </div>
    </el-container>
  </div>
</body>
<!-- import Vue before Element -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- import JavaScript -->
<script src="https://cdn.bootcss.com/axios/0.19.2/axios.js"></script>

<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
  new Vue({
    el: '#app',
    data: {
      qrcodeurl: "",
      alertUser: false,
      alertForm: {

      },
      ruleForm: {

      },
      userbase: {},
      tabPosition: "left",
      phone: "",
      count: 0,
      address: ""
    },
    mounted() {
      this.getuserbase();
      this.getbill();
    },
    methods: {
      getuserbase() {
        this.userbase = JSON.parse(localStorage.getItem("userbase"));
      },
      getbill() {
        var parmid = this.GetQueryValue('id');
        var address = this.GetQueryValue("address");
        var phone = this.GetQueryValue("phone");
        var count = this.GetQueryValue("count");

        this.phone = phone;
        this.address = address;
        this.count = count;
        axios.post("/movie/getMovie", { id: parmid }).then(res => {
          console.log(res)
          this.movieinfo = res.data.data;
          this.qrcodeurl = "http://qr.topscan.com/api.php?text=" + this.movieinfo.id;
        })
      },
      gocenter() {
        window.location.href = "/usercenter.jsp"
      },
      showwarm() {
        var a = confirm('支付成功')
        window.location.href = "/usercenter.jsp"
      },
      GetQueryValue(queryName) {
        var query = decodeURI(window.location.search.substring(1));
        var vars = query.split("&");
        for (var i = 0; i < vars.length; i++) {
          var pair = vars[i].split("=");
          if (pair[0] == queryName) { return pair[1]; }
        }
        return null;
      },
    }
  })
</script>

</html>